<template>
  <u-popup
    :show="visible"
    mode="center"
    bg-color="transparent"
  >
    <view class="cert-wrapper flex flex-y">
      <l-painter
        is-canvas-to-temp-file-path
        css="width:662rpx"
        @success="imageData = $event"
      >
        <l-painter-view>
          <l-painter-image
            :src="areaInfo.adoptCertificatePic"
            css=" width: 662rpx;height:920rpx;"
          ></l-painter-image>
        </l-painter-view>
        <l-painter-view
          css="position:absolute;top:40rpx;margin-top:20rpx;margin-left:60rpx;width: 602rpx;"
        >
          <l-painter-view css="display:flex;">
            <l-painter-view css="flex:1;">
              <l-painter-view>
                <l-painter-text
                  text="云认养\n证书"
                  css="color: #101010; font-size: 60rpx; fontWeight: 400;"
                ></l-painter-text>
              </l-painter-view>
            </l-painter-view>
            <l-painter-view css="position:absolute;right:60rpx">
              <l-painter-image
                :src="extData.catAvatar"
                css=" width: 148rpx;height:148rpx;border-radius:16rpx"
              ></l-painter-image>
            </l-painter-view>
          </l-painter-view>
          <l-painter-view css="margin-top:12rpx">
            <l-painter-text
              text="证书  "
              css="color: #333333 ; font-size: 26rpx; fontWeight: 400;"
            ></l-painter-text>
            <l-painter-text
              :text="certInfo.code"
              css="color: #333333 ; font-size: 26rpx; fontWeight: 400;"
            ></l-painter-text>
          </l-painter-view>
          <l-painter-view css="margin-top:54rpx">
            <l-painter-text
              :text="extData.userNickName"
              css="color: #333333 ; font-size: 36rpx; fontWeight: 600;"
            ></l-painter-text>
          </l-painter-view>
          <l-painter-view css="margin-top:14rpx">
            <l-painter-text
              :text="getContent(certInfo.content)[0]"
              css="color: #101010 ; font-size: 26rpx;"
            ></l-painter-text>
          </l-painter-view>
          <l-painter-view>
            <l-painter-text
              :text="getCertAreaTxt(getContent(certInfo.content)[1])"
              css="color: #101010 ; font-size: 26rpx;"
            ></l-painter-text>
            <l-painter-text
              :text="extData.cloudAdoptAreaName"
              :css="petNameStyle"
            ></l-painter-text>
            <l-painter-text
              :text="getCertAreaTxtTwo(getContent(certInfo.content)[1])"
              css="color: #101010 ; font-size: 26rpx;"
            ></l-painter-text>
          </l-painter-view>
          <l-painter-text
            :text="extData.catNickName"
            css="color: #068C18 ; font-size: 26rpx;"
          ></l-painter-text>
          <l-painter-view css="margin-top:56rpx">
            <l-painter-text
              text="“猫入福地”为你: "
              css="color: #333333 ; font-size: 24rpx;"
            ></l-painter-text>
          </l-painter-view>
          <l-painter-view css="display:flex;align-items:center">
            <l-painter-view
              v-for="item in greetings"
              :key="item"
              css="display:flex;align-items:center;justify-content:center;text-align:center"
            >
              <l-painter-text
                text="·"
                css="color:#d96b54;font-size:60rpx"
              ></l-painter-text>
              <l-painter-text
                :text="item"
                css="color: #333333 ; font-size: 24rpx;"
              ></l-painter-text>
            </l-painter-view>
          </l-painter-view>
          <l-painter-view css="display:flex;margin-top:52rpx">
            <l-painter-image
              :src="certInfo.qrUrl"
              css=" width: 92rpx;height:92rpx;"
            ></l-painter-image>
            <l-painter-view css="margin-left:12rpx">
              <l-painter-text
                text="动物绿洲公益"
                css="color:#333333;font-size:26rpx;font-weight: 500"
              ></l-painter-text>
              <l-painter-view>
                <l-painter-text
                  :text="certTime"
                  css="color:#666666;font-size:22rpx;font-weight: 400;"
                ></l-painter-text>
              </l-painter-view>
            </l-painter-view>
          </l-painter-view>
        </l-painter-view>
      </l-painter>
      <view
        v-if="certInfo.id"
        class="share-wrapper"
      >
        <button
          class="btn"
          style="margin-right: 22rpx"
          open-type="share"
        >
          分享
        </button>
        <view
          class="btn"
          style="margin-left: 22rpx"
          @click="download"
        >
          下载
        </view>
      </view>
      <view class="flex-center">
        <u--image
          src="/static/ic_dialog_close.png"
          width="60rpx"
          height="60rpx"
          @click="close"
        ></u--image>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { replaceCloudAdoptTemplate } from '@/utils/tools.js';
import { getCloudAreaInfo } from '@/api/pet-core.js';
import { getDictData } from '@/api/common.js';
import { getCloudAdoptCert } from '@/api/shop-activity.js';
import { saveBase64ToPhotosAlbum } from '@/utils/fileUtil.js';
export default {
  props: {
    value: {
      type: Boolean,
      value: false,
    },
    orderSn: {
      type: String,
      value: '',
    },
  },
  data() {
    return {
      imageData: '',
      infoList: [],
      certInfo: {},
      areaColor: '',
      extData: {},
      styleOptions: [],
      greetings: [],
      areaInfo: {},
      certTime: '',
      petNameStyle: '',
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getDictData();
      }
    },
  },
  mounted() {},
  methods: {
    //证书特性
    getDictData() {
      const that = this;
      getDictData('cloud_adoption_certificate_style').then((res) => {
        that.styleOptions = res.data;
        that.getCloudAdoptCert();
      });
    },
    //云养证书
    getCloudAdoptCert() {
      const that = this;
      getCloudAdoptCert('5', this.orderSn).then((res) => {
        console.log('getCloudAdoptCert', res);
        if (!res.data) {
          that.close();
          return;
        }
        that.certInfo = res.data;
        that.getCloudAreaInfo();
      });
    },
    //云养区域
    getCloudAreaInfo() {
      const that = this;
      this.extData = JSON.parse(this.certInfo.ext);
      if (!that.extData.cloudAdoptAreaId) {
        that.close();
        return;
      }

      getCloudAreaInfo(this.extData.cloudAdoptAreaId).then((res) => {
        that.areaInfo = res.data;
        if (res.data.certificateColor) {
          if (res.data.certificateColor.length === 6) {
            that.areaColor = `#${res.data.certificateColor}`;
          } else {
            that.areaColor = res.data.certificateColor;
          }
        }
        that.petNameStyle = `font:26rpx;color:${that.areaColor}`;
        that.handleData();
      });
    },
    handleData() {
      if (this.certInfo.content) {
        const style = ` <span style="color:${this.areaColor}">`;
        const contentStr = replaceCloudAdoptTemplate(
          this.certInfo.content,
          this.extData,
          `<span style="color:#068C18">`,
          '</span>',
          style
        );
        this.infoList = contentStr.split(',');
        const greet = this.styleOptions.find(
          (ele) => ele.value === this.certInfo.style
        );
        if (greet) {
          this.greetings = greet.description.split(',');
        }
      }
      this.certTime = this.$moment(this.certInfo.obtainTime).format(
        'YYYY年MM月DD日'
      );
    },
    getContent(content) {
      if (content) {
        return content.split(',');
      }
      return ['', '', ''];
    },
    getCertAreaTxt(text) {
      if (text) {
        const index = text.indexOf('\$');
        return text.substring(0, index);
      }
      return '';
    },
    getCertAreaTxtTwo(text) {
      if (text) {
        const index = text.indexOf('}');
        return text.substring(index + 1, text.length);
      }
      return '';
    },
    close() {
      this.visible = false;
    },
    download() {
      console.log('imageData', this.imageData);
      saveBase64ToPhotosAlbum(this.imageData);
    },
  },
};
</script>

<style lang="scss">
.cert-wrapper {
  width: 662rpx;
  .share-wrapper {
    margin: 12px 66px;
    display: flex;
    flex-direction: row;
    .btn {
      width: 228rpx;
      height: 60rpx;
      font-weight: 600;
      font-size: 28rpx;
      color: #24272d;
      line-height: 60rpx;
      text-align: center;
      background: $btn-primary-color;
      border-radius: 38rpx;
    }
  }
}
</style>
